<template>
  <view class="container">
    <view class="user-card" v-if="isLogin">
      <image class="avatar" :src="avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
      <view class="user-info">
        <text class="nickname">{{ nickname || '用户' }}</text>
        <text class="phone">{{ phone || '未绑定手机' }}</text>
      </view>
      <button class="logout-btn" @click="logout">退出登录</button>
    </view>
    
    <view class="function-area">
      <button class="primary-btn" @click="goToInfoPage" v-if="isLogin && !isInfoComplete">
        完善个人信息
      </button>
      
      <!-- GET请求示例按钮 -->
      <button class="primary-btn" @click="fetchGetData">调用GET接口(list?id=1)</button>
      
      <!-- GET请求结果展示 -->
      <view class="result-section" v-if="getResult">
        <text class="section-title">GET请求结果</text>
        <view class="result-item" v-for="(value, key) in getResult" :key="key">
          <text class="item-key">{{ key }}:</text>
          <text class="item-value">{{ value }}</text>
        </view>
      </view>
      
      <!-- POST请求示例按钮 -->
      <button class="primary-btn" @click="fetchPostData">调用POST接口(list2, type=1)</button>
      
      <!-- POST请求结果展示 -->
      <view class="result-section" v-if="postResult">
        <text class="section-title">POST请求结果</text>
        <view class="result-item" v-for="(value, key) in postResult" :key="key">
          <text class="item-key">{{ key }}:</text>
          <text class="item-value">{{ value }}</text>
        </view>
      </view>
      
      <!-- 文件下载示例按钮 -->
      <button class="primary-btn" @click="downloadFile">下载文件(filesDowm?hash='csadsadada')</button>
      
      <!-- 文件下载进度展示 -->
      <view class="download-progress" v-if="downloadProgress > 0 && downloadProgress < 100">
        <text>下载进度: {{ downloadProgress }}%</text>
        <progress :percent="downloadProgress" stroke-width="4" activeColor="#07c160" backgroundColor="#eeeeee"></progress>
      </view>
      
      <!-- FormData请求示例按钮 -->
      <button class="primary-btn" @click="pushDataWithFormData">调用FormData接口</button>
      
      <!-- FormData请求结果展示 -->
      <view class="formdata-result" v-if="formDataResult">
        <text class="section-title">FormData请求结果</text>
        <view class="result-item" v-for="(value, key) in formDataResult" :key="key">
          <text class="item-key">{{ key }}:</text>
          <text class="item-value">{{ value }}</text>
        </view>
      </view>
      
      <view class="loading" v-if="getLoading || postLoading || formDataLoading || downloadLoading">
        <text>加载中...</text>
      </view>
      
      <view class="error" v-if="getError || postError || formDataError || downloadError">
        <text>{{ getError || postError || formDataError || downloadError }}</text>
        <button @click="resetErrors">重新加载</button>
      </view>
      
      <view class="feature-list">
        <view class="feature-item">
          <image src="/static/feature1.png" mode="aspectFit"></image>
          <text>功能一</text>
        </view>
        <view class="feature-item">
          <image src="/static/feature2.png" mode="aspectFit"></image>
          <text>功能二</text>
        </view>
        <view class="feature-item">
          <image src="/static/feature3.png" mode="aspectFit"></image>
          <text>功能三</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { get, post, postFormData, downloadFile } from '../../utils/request'

export default {
  data() {
    return {
      // GET请求相关数据
      getResult: null,
      getLoading: false,
      getError: '',
      
      // POST请求相关数据
      postResult: null,
      postLoading: false,
      postError: '',
      
      // FormData请求相关数据
      formDataResult: null,
      formDataLoading: false,
      formDataError: '',
      
      // 文件下载相关数据
      downloadProgress: 0,
      downloadLoading: false,
      downloadError: ''
    }
  },
  computed: {
    isLogin() {
      return this.$store.state.user.isLogin
    },
    isInfoComplete() {
      return this.$store.state.user.isInfoComplete
    },
    nickname() {
      return this.$store.getters['user/nickname']
    },
    avatar() {
      return this.$store.getters['user/avatar']
    },
    phone() {
      return this.$store.getters['user/phone']
    }
  },
  methods: {
    // 退出登录
    logout() {
      this.$store.dispatch('user/logout')
    },
    
    // 前往完善信息页面
    goToInfoPage() {
      uni.navigateTo({
        url: '/pages/userInfo/userInfo'
      })
    },
    
    // 调用GET接口
    async fetchGetData() {
      this.getLoading = true
      this.getError = ''
      try {
        const res = await get('/api/list', {
          id: 1
        })
        this.getResult = res.data
      } catch (error) {
        this.getError = error.message || 'GET请求失败'
      } finally {
        this.getLoading = false
      }
    },
    
    // 调用POST接口
    async fetchPostData() {
      this.postLoading = true
      this.postError = ''
      try {
        const res = await post('/api/list2', {
          type: 1
        })
        this.postResult = res.data
      } catch (error) {
        this.postError = error.message || 'POST请求失败'
      } finally {
        this.postLoading = false
      }
    },
    
    // 调用FormData接口
    async pushDataWithFormData() {
      this.formDataLoading = true
      this.formDataError = ''
      try {
        const formData = {
          name: 'test',
          type: 1
        }
        const res = await postFormData('/api/formdata', formData)
        this.formDataResult = res.data
      } catch (error) {
        this.formDataError = error.message || 'FormData请求失败'
      } finally {
        this.formDataLoading = false
      }
    },
    
    // 下载文件
    async downloadFile() {
      this.downloadLoading = true
      this.downloadError = ''
      this.downloadProgress = 0
      try {
        await downloadFile('/api/filesDowm', {
          params: {
            hash: 'csadsadada'
          },
          onProgressUpdate: (res) => {
            this.downloadProgress = res.progress
          }
        })
        
        uni.showToast({
          title: '下载成功'
        })
      } catch (error) {
        this.downloadError = error.message || '文件下载失败'
      } finally {
        this.downloadLoading = false
      }
    },
    
    // 重置错误信息
    resetErrors() {
      this.getError = ''
      this.postError = ''
      this.formDataError = ''
      this.downloadError = ''
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.user-card {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}

.user-info {
  flex: 1;
  margin-left: 20rpx;
}

.nickname {
  font-size: 36rpx;
  font-weight: bold;
}

.phone {
  font-size: 28rpx;
  color: #999;
  display: block;
  margin-top: 10rpx;
}

.logout-btn {
  background-color: #f8f8f8;
  color: #666;
  font-size: 28rpx;
}

.function-area {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 16rpx;
}

.primary-btn {
  background-color: #07c160;
  color: #fff;
  margin-bottom: 20rpx;
}

.result-section {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.result-item {
  display: flex;
  margin-bottom: 10rpx;
}

.item-key {
  font-size: 28rpx;
  color: #666;
  width: 100rpx;
}

.item-value {
  font-size: 28rpx;
  flex: 1;
}

.download-progress {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
}

.formdata-result {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
}

.loading {
  text-align: center;
  padding: 20rpx;
  color: #666;
}

.error {
  text-align: center;
  padding: 20rpx;
  color: #e64340;
}

.feature-list {
  display: flex;
  justify-content: space-around;
  margin-top: 40rpx;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-item image {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 10rpx;
}

.feature-item text {
  font-size: 28rpx;
  color: #666;
}
</style>